<!--
 * @Author: 追逐的娃 kangchao_php@163.com
 * @Date: 2024-10-08 14:02:01
 * @LastEditors: 追逐的娃 kangchao_php@163.com
 * @LastEditTime: 2024-10-08 18:12:24
 * @FilePath: \vue-project\src\views\Other\Banner.vue
 * @Description: 
 * 
-->
<template>
  <div>
    <a-card>
      <a-space direction="vertical" fill>
        <a-row>
          <a-col>
            <a-button type="primary" @click="handleClick('add')">添加</a-button>
          </a-col>
        </a-row>
        <!-- 列表 -->
        <a-table :columns="columns" :data="data">
          <template #url="{ record }">
            <div class="banner_img">
              <img :src="baseUrl + '/' + record.url" :alt="record.title" />
            </div>
          </template>
          <template #type="{ record }">
            {{ record.type == 1 ? '首页' : '分类' }}
          </template>
          <template #handle="{ record }">
            <a-space>
              <a-link>编辑</a-link>
              <a-link>删除</a-link>
            </a-space>
          </template>
        </a-table>
      </a-space>
    </a-card>
    <!-- 添加编辑抽屉 -->
    <HandleForm
      ref="handleFormRef"
      :drawerInfo="drawerInfo"
      :formFields="formFields"
      :formConfig="formConfig"
      :rules="rules"
      @closeDrawer="drawerInfo.visible = false"
      @submitDrawer="submit"
    />
  </div>
</template>

<script setup>
import { getBanner, saveBanner } from '@/api/other.js'
import { reactive, ref } from 'vue'
import HandleForm from '@/components/HandleForm.vue'
import { Message } from '@arco-design/web-vue'
const columns = [
  {
    title: '标题',
    dataIndex: 'title'
  },
  {
    title: '图片',
    dataIndex: 'url',
    slotName: 'url'
  },
  {
    title: '所属模块',
    dataIndex: 'type',
    slotName: 'type'
  },
  {
    title: '链接',
    dataIndex: 'href'
  },
  {
    title: '操作',
    slotName: 'handle'
  }
]
const baseUrl = import.meta.env.VITE_APP_FILE_PREVIEW_URL
const data = ref([])
const currentId = ref('')
const handleFormRef = ref(null)
//添加编辑抽屉相关配置
const drawerInfo = ref({
  width: 800,
  visible: false,
  title: '添加轮播图'
})
//表单字段相关配置
const formFields = ref([
  {
    type: 'input',
    prop: 'title',
    label: '轮播图标题',
    placeholder: '请输入轮播图标题',
    isShow: true,
    defaultValue: ''
  },

  {
    type: 'select',
    prop: 'type',
    label: '所属模块',
    placeholder: '请选择所属模块',
    isShow: true,
    defaultValue: '',
    options: [
      { label: '首页', value: 1 },
      { label: '分类', value: 2 }
    ]
  },

  {
    type: 'upload',
    prop: 'url',
    label: '上传图片',
    limit: 1,
    isShow: true,
    accept: 'image/png, image/jpeg',
    defaultValue: '',
    uploadConfig: {
      //   width: '100px',
      //   height: '100px',
      //   imageUrl: '',
      pictureCard: 'picture-card'
      //   data: {},
      //   accept: 'image/png,image/jpg,image/jpeg',
      //   multiple: false,
      //   limit: 1,
      //   name: 'url'
    }
  },
  {
    type: 'input',
    prop: 'href',
    label: '跳转地址',
    placeholder: '没有地址则置空',
    isShow: true,
    defaultValue: ''
  },
  {
    type: 'radio',
    prop: 'hrefType',
    label: '链接类型',
    defaultValue: 1,
    isShow: true,
    options: [
      { label: '内链', value: 1 },
      { label: '外链', value: 2 }
    ]
  },
  {
    type: 'switch',
    prop: 'status',
    label: '是否启用',
    placeholder: '',
    active: 1,
    unActive: 0,
    isShow: true,
    defaultValue: 1
  }
])

//form相关配置
const formConfig = reactive({
  width: '100%'
})
//校验规则相关配置
const rules = reactive({})
//获取轮播图列表
const getList = async () => {
  let res = await getBanner()
  console.log(res)
  if (res.code == 200) {
    data.value = res.data
  }
}
getList()

//相关函数操作
const handleClick = (type) => {
  if (type == 'add') {
    drawerInfo.value.title = '添加轮播图'
  }
  drawerInfo.value.visible = true
}

//提交
const submit = async (formObj) => {
  let res = await saveBanner(formObj, currentId.value)
  if (res.code == 200) {
    Message.success('添加成功')
    getList()
    drawerInfo.value.visible = false
    handleFormRef.value.handleReset()
  }
}
</script>

<style lang="scss" scoped>
.banner_img {
  height: 80px;
  width: auto;
  img {
    height: 100%;
  }
}
</style>